<template>
  <div id="category">
    <van-nav-bar title="商品分类" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tree-select v-model:active-id="activeId" v-model:main-active-index="activeIndex" height="" :items="typeList">
      <template #content>
        <van-image
          v-for="item in typeList[activeIndex].children"
          :key="item.id"
          round
          width="4rem"
          height="4rem"
          :src="item.thumbs_text"
          @click="goDetail(item.id)"
        >
          <template #default>
            <span class="productName">{{item.name?item.name:"未知商品"}}</span>
          </template>
        </van-image>
      </template>
    </van-tree-select>

  </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";
const onClickLeft = () => history.back();

const { proxy } = getCurrentInstance()

const activeId = ref(1);
const activeIndex = ref(0);
onBeforeMount(() => {
  getType()
  getProduct()
})

// 分类列表
let typeList = ref([
  {text:'为您推荐',id:0},
]);

// 获取所有分类
const getType = async () => {
  let result = await proxy.$POST({
    url: "product/type",
  })
  if (result.code) {
    result.data.map(item =>{
      typeList.value.push(item)
    })
    return false
  } else {
    proxy.$fail(result.msg)
    return false
  }
}

const getProduct = async () => {
  let result = await proxy.$POST({
    url: "/product/getAllProduct",
  })
  if (result.code) {
    typeList.value[0].children = result.data
    return false
  } else {
    // 数据全部加载完成     
    proxy.$fail(result.msg)
    return false
  }
};

const goDetail = (id) => {
  proxy.$router.push(
    {
      path:'/product/detail',
      query:{proid:id}
    }
  )
}
</script>

<style>
.mainWarp .van-sidebar {
  margin-top: 44px;
}

#category .van-image--round{
  overflow: visible;
}

#category .van-image{
  margin: 7px;
}

/* #category .van-tree-select__content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
} */

#category .productName{
  display: inline-block;
  width: 4rem;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>